<template>
  <view class="my-tabs">
    <view v-for="tab in tabs"
          :key="tab.value"
          class="tabs-item"
          :class="{'is-active': tab.value===active}"
          @click="tabClick(tab)">{{tab.label}}</view>   
  </view>
</template>
<script>
export default {
  name: "tabs",
  props: {
    tabs: {
      type: Array,
      requried: true
    },
    active: {
      type: String,
      requried: true
    }
  },
  methods: {
    tabClick(tab) {
      this.$emit('tabClick', tab)
    }
  },
};
</script>
<style lang="scss" scoped>
.my-tabs {
  display: flex;
}
.tabs-item {
  margin: 0 3rem 2px;
  padding-bottom: 1.8rem;
  line-height: 4.2rem;
  font-size: 3rem;
  position: relative;
  color: #FFFFFF;
  &::before {
    content: '';
    position: absolute;
    display: block;
    width: 50%;
    left: 25%;
    bottom: 0;
    height: .6rem;
    // background: #FFFFFF;
    border-radius: 3px;
  }
  &.is-active {
    &::before {
      background: #FFFFFF;
    }
  }
}
</style>
